import React, {FC, useContext} from 'react';
import "./index.less";
import {HxConfigContext} from "@/layouts/HxConfigContext";
import {correspVal} from "@/utils/biz";

interface AriclesToolProps {
}

const AriclesTool: FC<AriclesToolProps> = (props) => {
  const {siteInfo, isZhCN} = useContext(HxConfigContext);
  if (!siteInfo?.toolAddress || siteInfo?.toolAddress.length === 0) {
    return null;
  }
  return (
    <div className={"aricles-tool-container"}>
      <div className={"aricles-tool-header"}>
        <div className={"aricles-tool-header-title"}>选刊发文工具支持</div>
        <div className={"aricles-tool-header-subtext"}>Tools for selecting and publishing articles</div>
      </div>
      <div className={"aricles-tool-content"}>
        {
          siteInfo?.toolAddress.map((item, index) => {
            const seq = (index + 1) % 3;
            return (
              <a className={`aricles-tool-btn aricles-tool-btn-${seq == 0 ? 3 : seq}`} key={index}>
                <div>{correspVal(isZhCN, item.nameCn, item.nameEn)}</div>
              </a>
            )
          })
        }
        {/*<a className={"aricles-tool-btn fund-project-tool-btn"}>基金项目</a>
        <a className={"aricles-tool-btn journal-gw-btn"}>期刊分级/预警</a>
        <a className={"aricles-tool-btn impact-factor-btn"}>期刊影响因子</a>*/}
      </div>
    </div>
  );
};

export default AriclesTool;
